<template>
  <vxe-modal v-model="show" 
  ref="xModal"
  destroy-on-close 
  resize show-zoom esc-closable showFooter
  :lock-scroll="false"
  width="clamp(400px, 100%, 1000px)"
  :height="modalHeight"
  size="mini"
  @show="onShow"
  @hide="onClose"
  @close="onClose">
    <template #title>
      <span>选择仓库</span>
    </template>
    <template #default>
      <vxe-grid ref="xGrid" v-bind="gridOptions" class="myGrid-style1"
        @keydown="onKeydownOfXGrid"
        @radio-change="radioChange"
        @cell-dblclick="dblclick">
          <template #form>
            <slot name="form"></slot>
          </template>

          <template #toolbar_buttons>
            <vxe-form :data="insideQueryParams" @reset=""
            :style="{width: 'clamp(250px,100%,330px)'}">
              <vxe-form-item span="24">
                <template #default>
                  <vxe-input v-model="insideQueryParams.word" type="text" clearable
                  suffix-icon="vxe-icon-search"
                  placeholder="按编号、名称、备注搜索"
                  @keydown="onKeydown"
                  @clear="onClear"></vxe-input>
                </template>
              </vxe-form-item>
            </vxe-form>
          </template>
      </vxe-grid>
    </template>
    
    <template #footer>
      <vxe-button content="取消" @click="onCloseOfSelected(false)" />
      <vxe-button status="primary" content="确定" @click="onCloseOfSelected(true)" />
    </template>
  </vxe-modal>
</template>
<script lang="ts" name="GoodsModal" setup>
import {reactive, ref, toRaw,} from 'vue';
import {VxeGridPropTypes, VxeGridProps,} from 'vxe-table';
import {columns, pagerConfig} from './data';
import {getListData, getTableData} from '/@/api/bd/warehouse';
import __ from 'lodash-es'

const props = defineProps({
  show: Boolean,
})

const insideQueryParams = reactive({
  word: '',
});

const reload = () => {
  let {pager} = xGrid.value.getProxyInfo()
  let query = Object.assign({}, toRaw(insideQueryParams), pager)
  getTableData(query).then((dd:any) => {
    xGrid.value.loadData(dd?.result)
    pager.total = dd?.page?.total
  }).finally(() => xGrid.value.focus())
}

const xModal = ref()
const xGrid = ref()
const gridOptions = reactive<VxeGridProps>({
  border: true,
  resizable: true,
  showHeaderOverflow: true,
  showOverflow: false,
  highlightHoverRow: true,
  keepSource: true,
  id: 'xGrid_modalOfWh',
  stripe: true,
  height: '111%',
  size: 'mini',
  rowId: 'id',
  rowClassName: ({ row, }) => {
    if (row.enable !== 1) {
      return 'row-enable'
    }
    return null
  },
  columns: columns as VxeGridPropTypes.Columns,
  columnConfig: {
    useKey: true,
    isCurrent: true,
    isHover: true,
  },
  rowConfig: {
    useKey: true,
    isCurrent: true,
    isHover: false,
    keyField: 'id',
  },
  keyboardConfig: {isArrow: true, isEnter: true,},
  customConfig: {
    storage: true,
  },
  tooltipConfig: {
  },
  sortConfig: {
    trigger: 'cell',
    remote: false,
  },
  filterConfig: {
    remote: false
  },
  pagerConfig: pagerConfig,
  toolbarConfig: {
    zoom: false,
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  radioConfig: {
    reserve: true,
    highlight: true,
    trigger: 'row',
    checkMethod: ({row,}) => {
      return row.enable === 1
    }
  },
  proxyConfig: {
    ajax: {
      query({ page, sort, sorts, filters, form }) {
        let query = Object.assign({}, toRaw(insideQueryParams), page)
        return getTableData(query);
      },
    }
  },
});

const onKeydownOfXGrid = ({ $event }) => {
  if ($event.keyCode === 13) {
    let row = xGrid.value.getCurrentRecord()
    if (row) xGrid.value.setRadioRow(row)
  }
}

const selectedOne = ref()

const radioChange = ({ row, }) => {
  if (row.enable) {
    selectedOne.value = row
  }
}

const dblclick = ({ row, }) => {
  if (row.enable === 1) {
    xModal.value.close().finally(() => emits('on-close-of-selected', toRaw(row)))
  }
}

const emits = defineEmits(['on-close', 'on-close-of-selected',]);

const modalHeight = ref(600)
const onShow = ({}) => {
  xGrid.value.focus()
  modalHeight.value = window.innerHeight - 220
}

const onClose = ({  }) => {
  insideQueryParams.word = ''
  selectedOne.value = null
  xGrid.value?.clearRadioRow()
  xGrid.value?.clearRadioReserve()
  emits('on-close')
}

const onCloseOfSelected = (selected:Boolean) => {
  emits('on-close-of-selected', selected ? toRaw(selectedOne.value) : null)
  xModal.value.close()
}

const onKeydown = ({ $event }) => {
  if ($event.keyCode === 13) {
    $event.stopPropagation() // 必须阻止冒泡,不然会同时触发xgrid的keydown
    reload()
  }
}

const onClear = ({  }) => {
  reload()
}

</script>

<style scoped>
:deep().vxe-body--row.row-enable {
  opacity: .52;
}
</style>
